<template>
	<view class="content">
		<view class="nav-bar">
			<image src="../../../static/back_icon.png" @tap="back" mode=""></image>
			<view class="center">
				<text class="left" :class="checked==1?'check':''" @tap="chec(1)">分享文案</text>
				<text class="right" :class="checked==2?'check':''" @tap="chec(2)">分享图片</text>
			</view>
			<view class="right">
			</view>
		</view>
		<view class="pan">
			<view class="shartxt" v-if="checked==1">
				<view class="txt">
					<rich-text :selectable="true" :nodes="txt"></rich-text>
				</view>
				<view class="copy" @tap="copy">
					复制文案
				</view>
				<view class="tip">
					注：不要更改文案中的任何信息哦~
				</view>
			</view>
			<view class="shareImg" v-if="checked==2">
				<view v-if="qrShow" class="poster">
					<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
				</view>
				<view class="hideCanvasView">
					<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||0) + 'px', height: (poster.height||0) + 'px'}"></canvas>
				</view>
				<view v-if="qrShow" class="butn">
					保存图片
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import _app from '@/common/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/common/QS-SharePoster/QS-SharePoster.js';
	export default {
		data() {
			return {
				checked: 1,
				txt: '陶瓷花瓶北欧创意干花插花花器客厅电视柜家居装饰摆件干花插花花器客厅<br/>【原价】149元<br/>【折扣价】83元<br/>【下单链接】https://jgrwiogjte<br/>点击链接查看',
				text: {
					txt1: '陶瓷花瓶北欧创意干花插花花器客厅电视柜家居装饰摆件干花插花花器客厅',
					txt2: '【原价】149元',
					txt3: '【折扣价】83元',
					txt4: '【下单链接】https://jgrwiogjte',
					txt5: '点击链接查看'
				},
				txext: '陶瓷花瓶北欧创意干花插花花器客厅电视柜家居装饰摆件干花插花花器客厅',
				poster: {},
				qrShow: false,
				canvasId: 'default_PosterCanvasId',
			}
		},
		onLoad() {
			// this.shareFc();
		},
		methods: {
			chec(index) {
				this.checked = index;
				if (index == 2) {
					this.shareFc();
				}
			},
			//复制文案
			copy() {
				uni.showToast({
					title: '请手动复制上面内容',
					icon: 'none',
				})
				// uni.setClipboardData({
				//     data:this.text.txt1 + this.text.txt2 + this.text.txt3 + this.text.txt4 + this.text.txt5,
				//     success: function () {
				//        uni.showToast({
				// 			icon:'none',
				// 			title: '文案复制成功'
				//        });
				//     }
				// });
			},
			back: function() {
				uni.navigateBack()
			},
			// previewImage: function(e) {
			// 	console.log(e);
			// 	uni.previewImage({
			// 		urls: this.poster.finalPath
			// 	})
			// },
			async shareFc() {
				try {
					if (!this.qrShow) {
						const d = await getSharePoster({
							_this: this, //若在组件中使用 必传
							type: 'testShareType',
							posterCanvasId: this.canvasId,
							delayTimeScale: 20, //延时系数
							// backgroundImage:'https://www.thorui.cn/img/product/2.png',//背景图
							background: {
								width: 614,
								height: 1062,
								backgroundColor: "white"
							},
							drawArray: ({
								bgObj,
								type,
								bgScale
							}) => {
								const dx = bgObj.width * 0.3;
								const fontSize = bgObj.width * 0.045;
								const lineHeight = bgObj.height * 0.04;
								//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
								return new Promise((rs, rj) => {
									rs([
										// {
										// 	type: 'custom',
										// 	setDraw(Context) {
										// 		// 设置阴影样式。
										// 		Context.setFillStyle('black');
										// 		//设置全局画笔透明度。
										// 		Context.setGlobalAlpha(0.3);
										// 		Context.fillRect(0, bgObj.height - bgObj.height * 0.2, bgObj.width, bgObj.height * 0.2);
										// 		Context.setGlobalAlpha(1);
										// 	}
										// },
										//海报主图显示
										{
											type: 'image',
											// dWidth:bgObj.width,
											// dHeight:bgObj.width,
											url: 'https://www.thorui.cn/img/product/2.png',
											infoCallBack(imageInfo) {
												let scale = bgObj.width / imageInfo.height;
												return {
													dWidth: imageInfo.width * scale,
													dHeight: imageInfo.width * scale,
												}
											}
										},
										// 文本名字
										{
											type: 'text',
											fontStyle: 'normal',
											text: this.txext,
											size: fontSize * 0.79,
											color: 'black',
											alpha: 1,
											// textAlign: 'left',
											textBaseline: 'middle',
											// 字体宽度
											lineFeed: {
												maxWidth: bgObj.width * 0.58,
												lineHeight: fontSize * 1.2
											},
											infoCallBack(textLength) {
												return {
													dx: bgObj.width * 0.05,
													dy: bgObj.width * 1.09,
												}
											}
										},
										//二维码生成
										{
											type: 'qrcode',
											text: '取舍',
											size: bgObj.width * 0.3,
											dx: bgObj.width * 0.65,
											dy: bgObj.width * 1.09,
										},
										// 折扣
										{
											type: 'text',
											fontStyle: 'normal',
											text: "折扣",
											size: fontSize,
											color: '#999999',
											alpha: 1,
											// textAlign: 'left',
											textBaseline: 'middle',
											// 字体宽度
											lineFeed: {
												maxWidth: bgObj.width * 0.55,
												lineHeight: fontSize * 1.4
											},
											infoCallBack(textLength) {
												return {
													dx: bgObj.width * 0.05,
													dy: bgObj.height * 0.735,
												}
											}
										},
										// 折扣数值
										{
											type: 'text',
											fontStyle: 'normal',
											text: "￥83.00",
											size: fontSize * 1.5,
											color: '#E8271B',
											alpha: 1,
											// textAlign: 'left',
											textBaseline: 'middle',
											// 字体宽度
											lineFeed: {
												maxWidth: bgObj.width * 0.55,
												lineHeight: fontSize * 1.4
											},
											infoCallBack(textLength) {
												return {
													dx: bgObj.width * 0.17,
													dy: bgObj.height * 0.73,
												}
											}
										},
										// 原价数值
										{
											type: 'text',
											fontStyle: 'normal',
											text: "原价￥149",
											size: fontSize * 0.9,
											color: '#CCCCCC',
											alpha: 1,
											// textAlign: 'left',
											textBaseline: 'middle',
											// 字体宽度
											lineFeed: {
												maxWidth: bgObj.width * 0.55,
												lineHeight: fontSize * 1.4
											},
											infoCallBack(textLength) {
												return {
													dx: bgObj.width * 0.05,
													dy: bgObj.height * 0.78,
												}
											}
										},
										// {
										// 	type: 'image',
										// 	// dWidth:bgObj.width,
										// 	// dHeight:bgObj.width,
										// 	url: '',
										// 	dx: bgObj.width * -0.01,
										// 	dy: bgObj.height * 0.85,
										// 	infoCallBack(imageInfo) {
										// 		let scale = bgObj.width * 0.2 / imageInfo.height;
										// 		return {
										// 			dWidth: imageInfo.width * 0.39, // 因为设置了圆形图片 所以要乘以2
										// 			dHeight: imageInfo.height * 0.39,
										// 		}
										// 	}
										// },
									]);
								})
							},
							setCanvasWH: ({
								bgObj,
								type,
								bgScale
							}) => { // 为动态设置画布宽高的方法，
								this.poster = bgObj;
							},
						});
						console.log('海报生成成功， 临时路径: ' + d.poster.tempFilePath)
						this.poster.finalPath = d.poster.tempFilePath;
						this.qrShow = true;
						_app.hideLoading();
					}
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
		}
	}
</script>

<style lang="scss">
	.hideCanvasView {
		position: relative;

		.hideCanvas {
			position: fixed;
			top: -99999upx;
			left: -99999upx;
			z-index: -99999;
		}
	}

	.nav-bar {
		height: 128upx;
		padding: 40upx 28upx 0;
		background: #E8271B;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		width: 750upx;
		z-index: 99;
		image {
			width: 48upx;
			height: 48upx;
		}

		.center {
			width: 464upx;
			height: 68upx;
			background: rgba(232, 39, 27, 1);
			border-radius: 34upx;
			border: 1upx solid #FFFFFF;
			display: flex;
			align-items: center;
			text-align: center;
			overflow: hidden;

			.left,
			.right {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				height: 68upx;
				font-size: 32upx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.check {
				background: rgba(255, 255, 255, 1);
				color: rgba(232, 39, 27, 1);
			}
		}

		.right {
			width: 48upx;
			height: 48upx;
		}
	}

	.pan {
		padding: 28upx;
		padding-top: 148upx;
		// 分享文案
		.shartxt {
			.txt {
				padding: 30upx 25upx;
				background: #FFFFFF;
				font-size: 28upx;
				font-weight: 500;
				line-height: 44upx;
				color: rgba(51, 51, 51, 1);
			}

			.copy {
				margin-top: 40upx;
				width: 694upx;
				height: 100upx;
				background: rgba(232, 39, 27, 1);
				border-radius: 58px;
				font-size: 36upx;
				font-weight: 500;
				line-height: 100upx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}

			.tip {
				font-size: 24upx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				text-align: center;
				margin-top: 30upx;
			}
		}

		.shareImg {
			.poster {
				width: 650upx;
				margin: 0 auto;
				padding-bottom: 100upx;
			}
			.butn{
				position:fixed;
				bottom: 0;
				left: 0;
				width: 750upx;
				height:100upx;
				background:rgba(232,39,27,1);
				font-size:36upx;
				font-weight:500;
				line-height:100upx;
				color:rgba(255,255,255,1);
				text-align: center;
			}
		}

	}
</style>
